彈性系統的基礎，在於定義一個嚴謹的內部 合約 或介面，要求物件必須遵循。在此情境下，我們定義一個 表格介面 ，其中每個單元格物件都保證存在三個特定方法： minWidth()、 minHeight()以及 draw(width, height)。
1. 介面合約
透過標準化這些方法，佈局邏輯可以在不瞭解個別單元格內部資料類型的情況下，計算出整體行列尺寸。這是一個典型的 基於介面的多型性。
2. TextCell 的實作
這個 TextCell 建構函數會將原始輸入以換行符分割成逐行陣列。這將複雜度從渲染階段轉移到建立階段。
this.text = text.split("\n");
3. 確定性繪製
這個 draw(width, height) 方法確保每個單元格的輸出都能透過 repeat() 輔助函數進行完美補齊。無論內容長度如何，都能維持垂直與水平對齊。
$$\text{填補} = \text{寬度} - \text{行長度}$$
main.py
TERMINALbash — 80x24
> Ready. Click "Run" to execute.
>
QUESTION 1
What is the primary benefit of the Table Interface contract in this design?
It forces all data to be strings.
It allows the layout engine to remain agnostic of the data it displays.
It speeds up JavaScript memory allocation.
It automatically creates HTML tables.
✅ Correct!
By relying on an interface rather than specific types, the engine can layout any object that implements the required methods.❌ Incorrect
The engine doesn't care about the data type, only that the object 'looks like' a cell by providing the contract methods.QUESTION 2
In
TextCell.prototype.minWidth, why is reduce used?To sum the length of all lines.
To find the longest line length in the cell.
To remove empty lines.
To convert the array back into a string.
✅ Correct!
It uses Math.max within reduce to distill the array of lines down to a single maximum width value.❌ Incorrect
The width of the cell is determined by its widest single line, not the sum of all lines.QUESTION 3
What does
TextCell.prototype.draw(width, height) return?A single long string with newline characters.
A canvas object for rendering.
An array of strings, each exactly 'width' characters wide.
A boolean indicating if the draw was successful.
✅ Correct!
It returns an array of length 'height', where each string is padded to the specified width.❌ Incorrect
Returning an array of strings allows the layout engine to combine multiple cells row-by-row easily.QUESTION 4
What is the purpose of the
repeat helper function?To handle cell borders.
To add padding spaces to ensure straight columns.
To duplicate rows for larger tables.
To loop through the cell array.
✅ Correct!
It generates the necessary number of spaces to ensure every line in a column has the same length.❌ Incorrect
repeat is a utility for string padding, which is critical for visual alignment in text tables.QUESTION 5
How does
TextCell handle a multi-line string input?It rejects it as invalid data.
It stores it as an array using
split('\n').It replaces newlines with spaces.
It only keeps the first line.
✅ Correct!
Splitting the text into an array allows the cell to manage its height and width based on individual lines.❌ Incorrect
The constructor breaks the input down so minHeight and minWidth can perform calculations on the lines.Case Study: The Modular Billboard System
Applying Interface Contracts to Physical Layouts
Imagine a physical modular billboard system where every advertisement panel must fit into a standardized metal frame. Whether a panel contains a single word or a full paragraph, the installer only needs to know the panel's dimensions (minWidth/minHeight) and how to 'draw' (bolt) it in.
Q
Explain how the 'installer' in this scenario represents the table layout function in our code.
Solution:
The installer is the layout engine. They don't need to know the 'content' (the ad) of the panel, only that it obeys the dimensions and can be drawn. This decoupling allows the billboard to host any panel type interchangeably.
The installer is the layout engine. They don't need to know the 'content' (the ad) of the panel, only that it obeys the dimensions and can be drawn. This decoupling allows the billboard to host any panel type interchangeably.
Q
If we wanted to create a 'RedTextCell' that prints red text but otherwise behaves the same, which part of the interface contract would change?
Solution:
Only the implementation of the
Only the implementation of the
draw method would change to include color codes. minWidth and minHeight would remain the same, proving the interface protects the layout logic from visual implementation details.